<script lang="ts" setup>
import { Form, Select, Tooltip } from 'ant-design-vue'
import type { AfterFetchContext } from '@vueuse/core'
import type { IBasic } from '~/types/apis/basic'
import type { IProxy } from '~/types/apis/proxy'

defineProps({
  labelName: {
    type: String,
    default: '代理选择'
  },
  disabled:{
    type: Boolean,
    default: false
  },
  differentFields: {
    type: Array,
    default: [] 
  }
})

const proxyId = defineModel<number>('proxyId', { required: true })

const proxiesData = ref<object>([])

defineExpose({
    proxiesData
})

    // const proxiesData = [1,2,3]

const { isFetching: loadingWithGetProxies, data: proxies } =
  useCustomFetch<IProxy[]>(`/engine-service/api/v1/proxy/find`, {
    afterFetch(ctx: AfterFetchContext<IBasic<IProxy[]>>) {
      if (ctx.data && ctx.data.code === 0) {
        proxiesData.value = ctx.data.data
        if (proxyId.value === -1) {
          proxyId.value = ctx.data.data[0].id
        }
        return {
          data: ctx.data.data,
          response: ctx.response,
        }
      }
      return {
        data: [],
        response: ctx.response,
      }
    },
  })
</script>

<template>
  <Form.Item  :label="labelName ? labelName : '代理选择'" :class="{'custom-label': differentFields.includes('proxyId')}">
    <Select :disabled="!disabled" v-model:value="proxyId" :loading="loadingWithGetProxies" placeholder="请选择代理"  style="width: 100%;">
      <Select.Option
        v-for="{ id, name, description } in proxies"
        :key="id"
        :value="id"
      >
        <Tooltip :title="description">{{ disabled ?  name : '请选择代理'}}</Tooltip>
      </Select.Option>
    </Select>
  </Form.Item>
</template>
